<template>
  <div :class="[
    'sq-switch',
    value ? 'is-checked' : '',
    disabled ? 'is-disabled' : '',
    `sq-switch__core_${size}`
  ]" :aria-checked="value" @click="handleClick">
    <span class="sq-switch__core" ref="core" :style="{
      'border-color': value ? activeColor : inactiveColor,
      'background-color': value ? activeColor : inactiveColor,
    }"></span>
    <!-- 接收表单需要的name -->
    <input type="checkbox" class="sq-switch__input" :name="name" />
    <i :class="['icon', value ? ficon : ricon]" :style="{ 'left': value ? '9px' : '33px' }"></i>
  </div>
</template>

<script>
export default {
  name: "SqSwitch",
  data() {
    return {};
  },
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.$emit("input", !this.value);
        this.$emit("change", !this.value);
      }
    },
  },
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    activeColor: {
      type: String,
      default: "#6366f1",
    },
    inactiveColor: {
      default: "#9ca3af",
    },
    name: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    mimicry: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
    },
    ficon: {
      type: String,
    },
    ricon: {
      type: String,
    }
  },
  created() { },
  mounted() { },
  computed: {},
  watched: {},
};
</script>
<style scoped lang="less">
@import "./index.less";
</style>
